<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MeetHere</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <style type="text/css">
        body{
            background-color: #f5f5f5;
            padding-top: 80px;
        }
        html {
            overflow-y: scroll;
        }
        :root {
            overflow-y: auto;
            overflow-x: hidden;
        }
        :root body {
            position: absolute;
        }
        body {
            width: 100vw;
            overflow: hidden;
        }
    </style>
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</head>
<body>

<div th:include="layout/header :: header(user=${session.user},flag=${session.user}!=null,page='index')"></div>


<main class="container-fluid">
    <div class="d-flex">
        <div class="col-8">
            <!--场馆信息-->
            <div class="card shadow">
                <div class="card-header py-2 bg-info text-white">
                    <h6 class="card-title mb-0">场馆信息</h6>
                </div>
                <ul class="list-group pt-2">
                    <li class="list-group-item px-3 pt-3 border-0" th:each="venue : ${venue_list}">
                        <div class="media border-bottom border-gray pb-3">
                            <div class="media-left mr-3">
                                <img th:src="${venue.picture} == ''?'venue.jpg':${venue.picture}"
                                     alt="" height="100px" width="100px">
                            </div>
                            <div class="media-body">
                                <h5 class="media-heading font-weight-bold pb-3">
                                    <a th:href="@{'venue?venueID='+${venue.venueID}}" target="_blank" th:text="${venue.venueName}">场馆A</a>
                                </h5>
                                <h6 class="d-flex">
                                    <p class="font-weight-bold mb-0">场馆位置：</p>
                                    <p class="mb-0" th:text="${venue.address}">上海市中心人民广场的南侧黄浦区人民大道201号</p>
                                </h6>
                                <h6 class="d-flex">
                                    <p class="font-weight-bold mb-0">开放时间：</p>
                                    <p class="mb-0" th:text="${venue.open_time}+'~'+${venue.close_time}">09:00 a.m. ~ 17:00 p.m.</p>
                                </h6>
                                <h6 class="d-flex">
                                    <p class="font-weight-bold mb-0">租金：</p>
                                    <p class="mb-0" th:text="'￥'+${venue.price}+'/h'">￥300/h</p>
                                </h6>
                            </div>
                        </div>
                    </li>

                </ul>
                <div class="card-body text-right pt-0 pb-2">
                    <h6 class="m-0"><a th:href="@{venue_list}" target="_blank"><span class="badge">MORE</span></a></h6>
                </div>

            </div>
        </div>

        <div class="col-4">
            <!--新闻-->
            <div class="bg-white rounded shadow">
                <div class="card-header py-2 bg-danger text-white">
                    <h6 class="card-title mb-0">新闻</h6>
                </div>
                <ul class="list-group pt-2">
                    <li class="list-group-item border-0 px-3 py-2" th:each="news : ${news_list}">
                        <div class="row mx-0 pb-2 border-bottom border-gray">
                            <a class="ml-1" th:href="@{'news?newsID='+${news.newsID}}" target="_blank" th:text="${news.title}">2019年12月24日场馆暂时关闭通知</a>
                            <div class="ml-auto">
                                <span class="badge badge-secondary" th:text="${#temporals.format(news.time, 'yyyy-MM-dd HH:mm:ss')}">2019-12-10</span>
                            </div>
                        </div>
                    </li>

                </ul>
                <div class="card-body text-right pt-0 pb-2">
                    <h6 class="m-0"><a th:href="@{news_list}" target="_blank"><span class="badge">MORE</span></a></h6>
                </div>
            </div>

            <!--留言板-->
            <div class="mt-4 bg-white rounded shadow">
                <div class="card-header py-2 bg-success text-white">
                    <h6 class="card-title mb-0">留言板</h6>
                </div>
                <ul class="list-group pt-2">
                    <li class="list-group-item px-3 border-0" th:each="message : ${message_list}">
                        <div class="media border-bottom border-gray">
                            <img class="mr-2" th:src="${message.picture} == ''?'default.jpg':${message.picture}"
                                 alt="" height="32px" width="32px">
                            <div class="media-body pb-3 mb-0 small">
                                <strong class="d-block" th:text="'@'+${message.userName}">@username</strong>
                                <p  th:text="${message.content}">
                                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo,
                                    tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                                </p>
                                <small class="float-right" th:text="${#temporals.format(message.time, 'yyyy-MM-dd HH:mm:ss')}">2019-12-10</small>
                            </div>

                        </div>
                    </li>

                </ul>
                <div class="card-body text-right pt-0 pb-2">
                    <h6 class="m-0"><a href="#" onclick="message_list()" th:href="@{message_list}" target="_blank"><span class="badge">MORE</span></a></h6>
                    <div id="user" th:text="${session.user}" hidden></div>
                </div>
            </div>

        </div>

    </div>
</main>

<div th:include="layout/footer :: Footer"></div>
<script type="text/javascript">
    function message_list(){
        let flag = $("#user").html() == '';
        if(flag){
            alert("请登录！");
            window.location.href = '/login';
        }
        else{
            window.location.href = '/message_list';
        }
    }
</script>

</body>
</html>